import { Fragment } from '@/components/Fragment'; 
import {
  Badge,
  Flex,
  IconEmail,
  Message,
  Tabs,
  Text,
} from '@aws-amplify/ui-react';
import { TabsDemo } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import {
  AriaLabel,
  BadgeIcons,
  ComposedTabsExample,
  ControlledTabExample,
  DataAttributeStyles,
  DefaultTabUncontrolled,
  DisabledTabs,
  IndicatorPosition,
  JustifyContent,
  LazyTabsExample,
  OverrideStyleClasses,
  Spacing,
  StyleProps,
  TabsThemeExample,
} from './examples';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

## Demo

<TabsDemo />

## Usage

<Message colorTheme="info">
The Tabs component had some breaking changes in v6. Please see the migration docs for more information. 
</Message>

Import the `Tabs` component and pass an array of items and a `defaultValue`.

<Example>
  <DefaultTabUncontrolled />
  <ExampleCode>
    ```jsx file=./examples/DefaultTabUncontrolled.tsx

    ```

</ExampleCode>
</Example>

### Controlled Tabs

The Tabs component also works as a controlled component. This allows you to programmatically set the current tab by setting the `value` prop. You can also use the `onValueChange` handler to know when a Tab would change.

<Message colorTheme="info">
Always include a `defaultValue` or `value` prop. If both are undefined, no initial tab is selected!
</Message>

<Example>
  <ControlledTabExample />
  <ExampleCode>
    ```jsx file=./examples/ControlledTabExample.tsx

    ```

</ExampleCode>
</Example>

### Lazy loading tabs

By default, each tab's content is always rendered into the DOM and hidden with CSS. This allows search engines and users (using cmd/ctrl+F) to see all the tab content. Sometimes this is not preferrable and you would rather only load tab content when a tab is shown. To do that use the `isLazy` prop. 

<Example>
<LazyTabsExample />
<ExampleCode>
```jsx file=./examples/LazyTabsExample.tsx
```
</ExampleCode>
</Example>


### Tab spacing

In the `Tabs` component, use the `spacing` prop to control how Tabs take up the remaining space. Pass `equal` to make each tab take up the same amount of space, and `relative` to make each tab take up space relative to the size of its title.

<Example>
  <Spacing />
  <ExampleCode>
    ```jsx file=./examples/Spacing.tsx

    ```

</ExampleCode>
</Example>

### Justify Content

In the `Tabs` component, use the `justifyContent` prop to control how space is distributed between and around the Tabs. Available options include `flex-start` (default), `flex-end`, `center`, `space-between`, `space-around`, and `space-evenly`.

Note: this prop only has an effect if the `spacing` prop is not set, otherwise the `spacing` prop will take precedence.

<Example>
  <JustifyContent />
  <ExampleCode>
    ```jsx file=./examples/JustifyContent.tsx

    ```

</ExampleCode>
</Example>


### Indicator Position

You can change the position of the tab border and current tab indicator with the `indicatorPosition` prop. The only values are `top` or `bottom` (default).

<Example>
  <IndicatorPosition />
  <ExampleCode>
    ```jsx file=./examples/IndicatorPosition.tsx

    ```

</ExampleCode>
</Example>

### Disabled Tabs

In the `TabItem` component, use the `isDisabled` prop to make a Tab not clickable and its content not visible to the user.

<Example>
  <DisabledTabs />
  <ExampleCode>
    ```jsx file=./examples/DisabledTabs.tsx

    ```

</ExampleCode>
</Example>

## Composable

The Tabs component is composable so you can rearrange parts of the tabs or access any props for each sub-component. Here are the composable parts of the Tabs component:

* `<Tabs.Container>`: outermost element to wrap all the pieces
* `<Tabs.List>`: the tab bar that contains the tabs
* `<Tabs.Item>`: each individual tab in the tab bar
* `<Tabs.Panel>`: the content for each tab

There should be a 1-to-1 relationship between `<Tabs.Item>`s and `<Tabs.Panel>`s. The corresponding item/panel should have the same value. 

All of the visual props, `indicatorPosition`, `spacing`, `justifyContent`, should be placed on the `<Tabs.List>` element. The other props like `defaultValue` and `isLazy` should go on the `<Tabs.Container>` element.

<Example>
<ComposedTabsExample />
<ExampleCode>
```jsx file=./examples/ComposedTabsExample.tsx
```
</ExampleCode>
</Example>

With the composable interface you can add elements to the tabs like badges and icons

<Example>
<BadgeIcons />
<ExampleCode>
```jsx file=./examples/BadgeIcons.tsx
```
</ExampleCode>
</Example>


## Styling

<ThemeExample component="Tabs">
  <Example>
    <TabsThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/TabsThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Tabs" />

### Global styling

To override styling on all Tabs components, you can set Amplify CSS variables or use the target classes like `.amplify-tabs` class.

<Example className="global-tabs-example">
  <DefaultTabUncontrolled />
  <ExampleCode>
    ```css
    /* styles.css */
    [data-amplify-theme] {
      /* background for the whole tab bar */
      --amplify-components-tabs-background-color: var(
        --amplify-colors-background-secondary
      );
      /* background for each tab */
      --amplify-components-tabs-item-background-color: var(
        --amplify-colors-background-primary
      );
    }
    /* OR */
    .amplify-tabs {
      background-color: var(--amplify-colors-background-secondary);
    }

    .amplify-tabs__item {
      background-color: var(--amplify-colors-background-primary);
    }
    ```

</ExampleCode>
</Example>


To replace the Tabs styling, unset it:

```css
.amplify-tabs {
  all: unset;
  /* Add your styling here*/
}

.amplify-tabs__item {
  all: unset;
  /* Add your styling here*/
}
```

### Local styling

To override styling on a specific `Tabs` component, you can use (in order of increasing specificity): a class selector or style props.

#### Using a class selector

<Example>
  <OverrideStyleClasses />
  <ExampleCode>
```css
/* styles.css */
.custom-tabs {
  background-color: var(--amplify-colors-primary-60);
  justify-content: center;
  border-color: transparent;
}

.custom-tab-item {
background-color: var(--amplify-colors-primary-80);
color: var(--amplify-colors-font-inverse);
border-color: transparent;
}

.custom-tab-item:hover {
color: var(--amplify-colors-font-inverse);
background-color: var(--amplify-colors-primary-90);
}

.custom-tab-item[aria-selected='true'] {
color: var(--amplify-colors-font-inverse);
border-color: transparent;
background-color: var(--amplify-colors-primary-100);
}

```
  </ExampleCode>
</Example>

#### Using style props

<Example>
  <StyleProps />
  <ExampleCode>
    ```jsx file=./examples/StyleProps.tsx

    ```

</ExampleCode>
</Example>

Note: there is currently no way to style different states like hover using only style props. However Amplify UI works well with CSS in JS frameworks for this usecase. Take a look at the [alternative styling docs](/guides/css-in-js) for information how to use CSS in JS with Amplify UI.

## Accessibility

Adheres to the [Tabs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).

We recommend passing an `ariaLabel` prop to help enable assistive technology.

<Example>
  <AriaLabel />
  <ExampleCode>
    ```jsx file=./examples/AriaLabel.tsx

    ```

</ExampleCode>
</Example>
